<template>
  <div class="container">
    <h1>{{ res }}</h1>
    <div class="all">
      <div
        class="wheel"
        :class="showCover == item.id ? 'cover' : ''"
        v-for="(item, index) in yes"
        :key="item.id"
      >
        {{ item.text }}
      </div>
    </div>

    <button id="spinButton" @click="start">开始抽奖</button>
  </div>
</template>
<script setup>
import { ref } from 'vue'
const showCover = ref(0)
const res = ref('真棒,啥都做完了!奖励一下自己吧!')

const yes = ref([
  { id: '1', text: '睡个大觉' },
  { id: '2', text: '继续学习' },
  { id: '3', text: '追剧追剧' },
  { id: '4', text: '看场电影' },
  { id: '5', text: '老实上班' },
  { id: '6', text: '跑个步吧' },
  { id: '7', text: '啥都别想' },
  { id: '8', text: '原神启动' },
  { id: '9', text: '王者农药' },
  { id: '10', text: '核平精英' },
  { id: '11', text: '手气太差' },
  { id: '12', text: '吃个大餐' },
])

const start = () => {
  let sum = 0
  let total = Math.floor(Math.random() * 3000) + 5000
  let randomNum = 50
  showCover.value = Math.floor(Math.random() * 12)
  const timer = setInterval(() => {
    showCover.value++
    res.value = `抽奖中...${(total - sum) / 1000}秒后开奖`
    if (showCover.value == 13) {
      showCover.value = 1
    }
    sum += randomNum
    if (sum >= total) {
      console.log(showCover.value)
      if (showCover.value == 5 || showCover.value == 11 || showCover.value == 7) {
        res.value = '很遗憾!' + yes.value[showCover.value - 1].text
      } else {
        res.value =
          '恭喜中奖!奖品是奖励自己' + yes.value[showCover.value - 1].text
      }
      clearInterval(timer)
    }
  }, randomNum)
}
</script>

<style scoped>
h1 {
  margin: 0;
}
.container {
  text-align: center;
  width: 500px;
}
.all {
  display: grid;
  margin: 0 auto;
  width: 80%;
  gap: 20px;
  grid-template-columns: repeat(6, 1fr);
}
.wheel {
  position: relative;
  width: 40px;
  height: 40px;
  border: 1px solid black;
}
.cover::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  background-color: gray;
  opacity: 0.5;
}
#spinButton {
  padding: 10px 20px;
  font-size: 16px;
  margin-top: 5px;
  cursor: pointer;
}
</style>
